<div class='title'>Jet语法</div>

<div class='text indent'>
    本节将介绍以下Jet的总体语法，主要从以下五个方面介绍：
    <span class="light-text">(点及下面的列表可以跳转到对应位置)</span>
    <div class="list">
        <div class='link' jump-to='base'>1.基本使用 <span class="light-text">(参数列表与说明)</span><i class="icon icon-double-angle-right"></i></div>
        <div class='link' jump-to='part'>2.局部渲染 <span class="light-text">(局部渲染dom)</span><i class="icon icon-double-angle-right"></i></div>
        <div class='link' jump-to='name'>3.name参数 <span class="light-text">(为Jet元素设置一个唯一标识，设置后可以通过 Jet.comp[name] 获取到Jet元素)</span><i class="icon icon-double-angle-right"></i></div>
        <div class='link' jump-to='par'>4.par参数 <span class="light-text">(设置当前元素的父元素)</span><i class="icon icon-double-angle-right"></i></div>
        <div class='link' jump-to='static'>5.static参数 <span class="light-text">(设置Jet元素的静态数据)</span><i class="icon icon-double-angle-right"></i></div>
        <div class='link' jon='Jet.root.jumpTo("/intro/life")'>6.生命周期 <span class="light-text">(在组件的不同状态时触发设置的对应函数)</span><i class="icon icon-double-angle-right"></i></div>
    </div>
</div>
<div class='title' jump-des='base'>1.基本使用</div>
<div class="sub">
    <div class='title' jump-des='data&func'>1.data和func的使用</div>
    <div class='text'>Jet 使用
        <span class='red'>new Jet()</span> 或 <span class='red'>JET()</span>
        来创建一个Jet组件，该组件的作用范围是当前Jet组件以及其中加载的Jload。
        <span class='light-text'>(见jload章节)</span>
    </div>
    <div class='text'>
        new Jet() 参数是一个json类型的值，有以下属性：
        <div class="list">
            <div>1.data <span class="light-text">(获取或者设置dom元素的innerHTML)</span></div>
            <div>2.func <span class="light-text">(获取dom元素的outerHTML)</span></div>
            <div class='link' jon='Jet.root.jumpTo("/intro/life")'>3.9个生命周期函数 <span class="light-text">(设置后可以通过 Jet.name 获取到Jet元素)</span><i class="icon icon-double-angle-right"></i></div>
            <div class='link' jump-to='name'>4.name参数 <span class="light-text">(为Jet元素设置一个唯一标识，设置后可以通过 Jet.name 获取到Jet元素)</span><i class="icon icon-double-angle-right"></i></div>
            <div class='link' jump-to='par'>5.par参数 <span class="light-text">(设置当前元素的父元素)</span><i class="icon icon-double-angle-right"></i></div>
            <div class='link' jump-to='part'>6.ele参数 <span class="light-text">(根据设置的ele参数局部渲染dom)</span><i class="icon icon-double-angle-right"></i></div>
            <div class='link' jump-to='static'>7.static参数 <span class="light-text">(设置Jet元素的静态数据)</span><i class="icon icon-double-angle-right"></i></div>
        </div>
    </div>

    <div class='j-code' disabled width='99%' height='auto'>
&lt;div j='message'>
&lt;/div>
&lt;!-- 会显示hello world --&gt;
&lt;script>
    new Jet({//或 JET({})
        data:{//数据
            message:'hello word'
        },
        func:{
            //函数
        }
    });
&lt;/script>
    </div>
    <div class='text'>以下是输出的html:
        <div class='out'>
            <div j='message'>
            </div>
        </div>
    </div>
    <div class='title' jump-des='data-func'>2.data的立即执行函数</div>
    <div class="text">在声明data时，除了可以使用值以外，还可以使用带有返回值的函数。</div>
    <div class="text">这些函数被称为<span class='red'>data的立即执行函数</span>，使用立即执行函数的好处是，可以在声明data时直接声明一些需要计算才能得到的值，比如根据其他某个组件中某个属性或多个属性计算得到的值或是获取dom元素的属性等。</div>
    <div class="text">在这些函数中 this指代当前的Jet元素，函数接受两个参数，第一个参数是当前Jet元素的源数据，第二个参数是当前数据域。请看一个例子：</div>
    <div class='j-code' disabled width='99%' height='auto'>
&lt;div j='dataFunc'>&lt;/div>
&lt;div j='jsonDataFunc'>
    &lt;span j='dataFunc'>&lt;/span>
&lt;/div>
&lt;script>
    new Jet({
        data:{//数据
            message:'hello word',
            dataFunc:function(data,curData){
                return data.message+' !'
            },
            jsonDataFunc:{
                mes:'hello func',
                dataFunc:function(data,curData){
                    return curData.mes+' again !!'
                }
            }
        }
    });
&lt;/script>
    </div>
    <div class='text'>以下是输出的html:
        <div class='out'>
            <div j='dataFunc'></div>
            <div j='jsonDataFunc'>
                <span j='dataFunc'></span>
            </div>
        </div>
    </div>
</div>

<div class='title' jump-des='part'>2.局部渲染（ele参数）</div>
<div class="sub">
    <div class='text'>通过给 new Jet() 参数增加一个 ele 属性（值是一个id值或者是一个dom元素）。可以局部渲染html元素。
        请看一个例子
    </div>
    <div class='text'>
        这个参数是可选的，请注意：不要给根Jet元素使用这个参数。
    </div>

    <div class='j-code' disabled width='99%' height='auto'>
&lt;div j='message'>$&lt;/div>&lt;!-- 不会被渲染 --&gt;
&lt;div jdom='test'>
    &lt;div j='message'>$&lt;/div>
&lt;/div>
&lt;script>
    new Jet({
        ele:'test',//或者使用document.getElementById('test')
        data:{//数据
            message:'hello word'
        }
    });
&lt;/script>
    </div>
    <div class='text'>以下是输出的html:
        <div class='out'>   
            <div>$</div>
            <div>
                <div>hello word</div>
            </div>
        </div>
    </div>
</div>

<div class='title' jump-des='name'>3.name参数</div>
<div class="sub">
    <div class='text'>设置name参数后可以通过 Jet.comp[name] 获取到Jet元素。请看一个例子
    </div>

    <div class='j-code' disabled width='99%' height='auto'>
&lt;button jon='alert(Jet.comp.myJet.myMessage)'>获取myJet&lt;/button>
&lt;script>
    new Jet({
        name:'myJet',
        data:{//数据
            myMessage:'myJet'
        }
    });
&lt;/script>
    </div>
    <div class='text'>以下是输出的html:
        <div class='out'>   
            <button jon='alert(Jet.comp.myJet.myMessage)'>获取myJet</button>
        </div>
    </div>
    <div class='title' jump-des='root'>Jet.root:根组件</div>
    <div class='text'>
        root.js 或 root.html 中声明的组件是Jet应用的根组件，所有的组件都是它的直接或间接孩子。可以通过Jet.root获取到根组件。
    </div>
</div>

<div class='title' jump-des='par'>4.par参数</div>
<div class="sub">
    <div class='text indent'>par参数用于设置当前Jet元素的父Jet元素，设置以后可以在Jet元素中通过 <span class="red">this.$par</span> 获取到父元素，一般用于jload组件或者路由组件与父组件之间的状态共享
        一个父元素可以有多个子元素，但是一个子元素只能有一个父元素。父元素可以通过 <span class="red">this.$child</span> 获取其子元素，子元素是一个json，键对应的是Jet的name参数。请看一个例子
    </div>
    <div class='text indent'>
        这个参数也是可选的，且通常无需设置，Jet会自动为组件制定父元素或子元素。

    </div>

    <div class='j-code not-test' disabled width='99%' height='auto'>
&lt;script>
    //父元素
    new Jet({
        name:'parent',
        data:{
            info:'parent'
        }
    });

    //子元素
    new Jet({
        name:'children',
        par:'parent',
        data:{
        }
    });
    //执行上面代码之后 Jet.children.$par==Jet.parent
    // Jet.parent.$child=={children:Jet.children}
&lt;/script>
    </div>
    <div class='text'>
        除了直接使用par属性，在jload元素中，还可以设置jload html元素的 <span class="link" jon='Jet.root.jumpTo("/attr/load","jpar")'>jpar属性</span> 来动态的设置 父Jet元素。
    </div>
</div>
<div class='title' jump-des='static'>5.static参数</div>
<div class="sub">
    <div class='text indent'>
        static 参数用于给Jet添加一些静态数据，这里的静态数据的含义是，不会与dom元素绑定，但是可以通过js读取和修改的数据。
    </div>
    <div class='text indent'>
        与 data 参数不同，static数据不会与被整合到Jet元素中，在Jet中可以使用 this.$data 来访问和修改static数据。
        因为data会被Jet转化成一个响应数据，所以对无需与dom元素绑定的非响应数据最好使用static参数声明，这样可以提高程序效率。
    </div>
    <div class='text indent'>
        static 数据也可以使用函数作为值，效果与data的立即执行函数一样，不同的是函数支持三个参数，第一个是 data数据，第二个是static数据，第三个是static域数据。
    </div>
    <div class='text'>
        请看一个例子
    </div>
    <div class='j-code' disabled width='99%' height='auto'>
&lt;script>
    new Jet({
        static:{
            user:{
                name:'static data name'
            }
        },
        onmounted:function(){
            alert(this.$data.user.name)
        }
    });
&lt;/script>
    </div>
</div>


<script>
    new Jet({
        name:'myJet',
        // onroute:function(){
        //   console.log('onroute');
        // },
        // beforeinit:function(){
        //   console.log('beforeinit');
        // },
        // beforemount:function(){
        //   console.log('beforemount');
        // },
        // onready:function(){
        //   console.log('onready');
        // },
        // onload:function(){
        //   console.log('onload');
        // },
        // onmounted:function(){
        //   console.log('onmounted');
        // },
        // onrouted:function(){
        //   console.log('onrouted');
        // },
        data:{//数据
            myMessage:'myJet',
            message:'hello word',
            dataFunc:function(data,curData){
                return data.message+' !'
            },
            jsonDataFunc:{
                mes:'hello func',
                dataFunc:function(data,curData){
                    return curData.mes+' again !!'
                }
            }
        }
    });
</script>
